<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height:180px;">
                    <div class="user-info">
                        <img src="../../assets/img/img.jpg" class="user-avator" alt/>
                        <div class="user-info-cont">
                            <div class="user-info-name">{{name}}</div>
                            <div>{{role}}</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="12">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-lx-recharge grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">￥{{totalCapital}}元</div>
                                    <div>总金额</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-lx-recharge grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">￥{{totalIncome}}元</div>
                                    <div>累计收益</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <div class="container">
                <div class="handle-box">
                    <div>订单详情表</div>
                </div>
                <el-table
                        :data="tableData"
                        border
                        class="table"
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                >
                    <el-table-column type="index" label="#"></el-table-column>
                    <el-table-column prop="id" label="订单编号"></el-table-column>
                    <el-table-column prop="createTime" label="买入日期"></el-table-column>
                    <el-table-column prop="fundName" label="基金简称"></el-table-column>
                    <el-table-column prop="money" label="买入金额"></el-table-column>
                    <el-table-column prop="totalIncome" label="累计收入"></el-table-column>
                    <el-table-column prop="endTime" label="卖出日期"></el-table-column>
                    <el-table-column prop="state" label="状态"></el-table-column>

                    <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button
                                    type="text"
                                    icon="el-icon-edit"
                                    @click="sellEdit(scope.$index, scope.row)"
                            >卖出</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-row>
    </div>
</template>

<script>
    import Schart from 'vue-schart';
    export default {
        data() {
            return {
                name: localStorage.getItem('ms_username'),
                totalCapital: 1000,
                totalIncome: 222,
                tableData:[
                    {
                    id: 1,
                    createTime: '2020-3-22',
                    fundName: '测试',
                    money: 100.00,
                    totalIncome: 10.00,
                    endTime: '-',
                    state: '持有',
                    },
                    {
                        id: 2,
                        createTime: '2020-3-22',
                        fundName: '测试',
                        money: 100.00,
                        totalIncome: 10.00,
                        endTime: '-',
                        state: '持有',
                    },
                    {
                        id: 3,
                        createTime: '2020-3-22',
                        fundName: '测试',
                        money: 100.00,
                        totalIncome: 10.00,
                        endTime: '-',
                        state: '持有',
                    }]
            }
        },
        components: {
            Schart
        },
        computed: {
            role() {
                return this.name === 'admin' ? '超级管理员' : '普通用户';
            }
        },
        created() {
            this.getData();
            this.getMoney();
        },
        methods: {

            // 获取后台的模拟数据
            getData() {
                const _this = this;
                this.$http.get(`/order/get_by_user_id/${localStorage.getItem('user_id')}`).then(function (resp) {
                    _this.tableData = resp.data;
                    for (let i = 0; i < _this.tableData.length; i++) {
                        _this.tableData[i].endTime = _this.tableData[i].endTime === null ? '-': resp.data.totalIncome;
                        _this.tableData[i].state = _this.tableData[i].state === 1 ? '持有':'卖出';
                    }
                });
            },
            getMoney(){
                const _this = this;
                this.$http.get(`/order/get_money/${localStorage.getItem('user_id')}`).then(function (resp) {
                    _this.totalCapital = resp.data.totalMoney;
                    _this.totalIncome = resp.data.totalIncome;

                });
            },
            // 删除操作
            sellEdit(index, row) {
                const _this = this;
                if (row.state === '卖出'){
                    this.$message.error('已卖出，不能重复卖出')
                } else {
                    // 二次确认删除
                    this.$confirm('确定要卖出:  '+row.fundName, '提示', {
                        type: 'success'
                    })
                        .then(() => {
                            this.$http.post(`/order/sell_fund/${row.id}`).then(function (resp) {
                                if (resp.data == 'success'){
                                    _this.$message.success(`${row.fundName}卖出成功`);
                                    this.getData();
                                }else{
                                    _this.$message.error(`${row.fundName}卖出失败`);
                                }
                            })
                        })
                        .catch(() => {});
                }

            },
            changeDate() {
                const now = new Date().getTime();
                this.data.forEach((item, index) => {
                    const date = new Date(now - (6 - index) * 86400000);
                    item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
                });
            }
        }
    };
</script>


<style scoped>

    .grid-content {
        display: flex;
        align-items: center;
        height: 100px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
    }

    .grid-num {
        font-size: 30px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
        color: rgb(242, 94, 67);
    }

    .user-info {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 2px solid #ccc;
        margin-bottom: 20px;
    }

    .user-avator {
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }

    .user-info-cont {
        padding-left: 50px;
        flex: 1;
        font-size: 14px;
        color: #999;
    }

    .user-info-cont div:first-child {
        font-size: 30px;
        color: #222;
    }

    .user-info-list span {
        margin-left: 70px;
    }

    .mgb20 {
        margin-bottom: 20px;
    }
    .handle-box {
        margin-bottom: 20px;
    }

    .textHeader span{
        margin-left: 6px;
        margin-right: 6px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .mr10 {
        margin-right: 10px;
    }
</style>
